<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery动画效果处理</title>
    <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .test{
            width: 100px;
            height: 100px;
            margin: 0 auto;
            background-color: green;
            border: 1px solid red;
            display: block;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>元素显示和隐藏</legend>
        <div id="hello1">
            hello1
        </div>
        <div id="hello2">
            hello2
        </div>
        <button id="btnShow" class="btn btn-success">显示</button>
        <button id="btnHide" class="btn btn-primary">隐藏</button>
        <button id="btnToggle" class="btn btn-warning">显示隐藏切换</button>
    </fieldset>
    <fieldset>
        <legend>滑动</legend>
        <div id="p1">
            <pre>
            一、简介
            定义
            　　jQuery创始人是美国John Resig，是优秀的Javascript框架；
            　　jQuery是一个轻量级、快速简洁的javaScript库。源码戳这
            jQuery对象
            　　jQuery产生的对象时jQuery独有的，只能自己调用
            书写规则
            　　支持链式操作；
            　　在变量前加"$"符号（var $variable = jQuery 对象）；
            　　注：此规定并不是强制要求。
            </pre>
        </div>
        <button id="btnSlideDown">滑下</button>
        <button id="btnSlideUp">滑上</button>
        <button id="btnSlideToggle">滑上/滑下切换</button>
    </fieldset>
    <fieldset>
        <legend>淡入淡出</legend>
        <div id="p2">
            <pre>
            Spring Boot 2 新特性概览：正式支持 Java 9
            根据我们此前的报道，Spring Boot 2 最大的变化主要集中在以下几方面：
            Spring Boot 2 基于 Spring Framework 5，而整个 Spring Framework 5.0 代码库运行于 Java 8 之上。所以，Spring Boot 2 要求的 JDK 版本最低也是 Java 8，同时也已正式支持 Java 9（这里有一份使用 Java 9 运行 Spring Boot 的文档 https://www.oschina.net/translate/spring-boot-with-java9）
            与 Spring Boot 1 的差别在于，许多配置属性已被重命名或被删除，因此由 Spring Boot 1 迁移至 Spring Boot 2 需要注意一些配置属性
            Spring Boot 为 Java 应用程序引入的关键创新是将 Servlet 容器嵌入到一个可执行的 jar 包中，这个 jar 包会打包整个应用。Spring Boot 还提供了 Tomcat、Undertow 和 Jetty 作为可选的方案
            </pre>
        </div>
        <button id="btnFadeIn">淡入</button>
        <button id="btnFadeOut">淡出</button>
        <button id="btnFadeToggle">淡入/淡出切换</button>
        <button id="btnFadeTo">透明度调整</button>
    </fieldset>
    <fieldset>
        <legend>创建自定义动画</legend>
        <button id="go"> Run</button>
        <div id="block">Hello!</div>
    </fieldset>
</body>
<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnShow").click(function () {
            //$("div").show();//显示隐藏的匹配元素
            $("#hello1,#hello2").show("normal");    //参数表示速度,("slow","normal","fast"),也可为900毫秒
        });
        $("#btnHide").click(function () {
            //$("div").hide();//隐藏显示的元素
            $("#hello1,#hello2").hide("normal");//隐藏显示的元素， 参数表示速度,("slow","normal","fast"),也可为900毫秒
        });
        $("#btnToggle").click(function () {
            //$("div").toggle();//切换 显示/隐藏
            $("#hello1,#hello2").toggle("normal");//切换 显示/隐藏
        });
        
        $("#btnSlideDown").click(function () {
            $("#p1").slideDown("900");//用900毫秒时间将段落滑下
        });
        $("#btnSlideUp").click(function () {
            $("#p1").slideUp("900");//用900毫秒时间将段落滑上
        });
        $("#btnSlideToggle").click(function () {
            $("#p1").slideToggle("900");//用900毫秒时间将段落滑上/滑下
        });

        $("#btnFadeIn").click(function () {
            $("#p2").fadeIn("900");//用900毫秒时间将段落淡入
        });

        $("#btnFadeOut").click(function () {
            $("#p2").fadeOut("900");//用900毫秒时间将段落淡出
        });

        $("#btnFadeToggle").click(function () {
            $("#p2").fadeToggle("900");//用900毫秒时间将段落淡入/淡出切换
        });

        $("#btnFadeTo").click(function () {
            $("#p2").fadeTo("900",0.5);//用900毫秒时间将段落的透明度调整到0.5
        });

        // 在一个动画中同时应用三种类型的效果
        $("#go").click(function(){
            $("#block").animate({//animate是一个用于创建自定义动画的函数
                width: "90%",
                height: "100%",
                fontSize: "10em",
                borderWidth: 10
            }, 3000);
        });
    });


</script>
</html>